<!--
  - author：miss
  - time: 2021
  - Copyright (c) 2021. miss
  -->

<template>
  <div class="login">
    <div class="boxs">
      <div class="img">
        <img src="../assets/logo.png" />
      </div>
      <h3>彭泽公安局警保系统</h3>
      <div class="from">
        <p>
          <i class="el-icon-user"></i>
          <input type="text" v-model="username" placeholder="账号" />
        </p>
        <p>
          <i class="el-icon-unlock"></i>
          <input type="password" v-model="password" placeholder="密码" @keyup.enter="login" />
        </p>
        <div class="sub">
          <el-button type="primary" @click="login">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {userLogin} from '../untils/user';
export default {
  name: "login",
  data(){
    return {
      username: '',
      password: '',
    }
  },
  created() {
    if(!this.IEVersion()) {
      this.$message.error('当前为 IE 浏览器，请使用其他浏览器获取更好的体验')
    }
  },
  methods:{
    login() {
		this.$router.push('/')
      // if(this.username === '' || this.password === '') {
      //   this.$message('账号密码不能为空')
      //   return false;
      // }
      // let data = {
      //   userName: this.username,
      //   password: this.$sha256(this.password)
      // }
      // userLogin(data).then(res => {
      //   if(res.data.code === 200) {
      //     localStorage.setItem('token', res.data.data.token)
      //     localStorage.setItem('deptId', res.data.data.deptId)
      //     localStorage.setItem('deptName', res.data.data.deptName)
      //     localStorage.setItem('name', res.data.data.realName)
      //     localStorage.setItem('roleName', res.data.data.roleName)
      //     localStorage.setItem('fg', res.data.data.fg)  // 0 公安局 1 派出所
      //     this.$router.push('/')
      //   }else {
      //     this.$message.error(res.data.message)
      //   }
      // })

    },
    IEVersion() {
      var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
      var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
      var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
      var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
      if(isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if(fIEVersion == 7) {
          return false;
        } else if(fIEVersion == 8) {
          return false;
        } else if(fIEVersion == 9) {
          return false;
        } else if(fIEVersion == 10) {
          return false;
        } else {
          return false;   //IE版本<=7
        }
      } else if(isEdge) {
        return true;   //edge
      } else if(isIE11) {
        return false;  //IE11
      }else{
        return true;   //不是ie浏览器
      }
    }
  }
}
</script>

<style scoped>
.login {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgb(46,117,201);
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxs {
  position: relative;
  width: 350px;
  height: 400px;
  /* background-color: #EEEEEE; */
}
.boxs .img {
  display: flex;
  justify-content: center;
  height: 90px;
  width: 100%;
}
.boxs h3 {
  text-align: center;
  color: #FFFFFF;
  font-size: 22px;
  letter-spacing: 1px;
}
.boxs .img img {
  width: 70px;
  height: 70px;
}
.from {
  margin-top: 40px;
}
.from p {
  position: relative;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #FFF;
  border-radius: 6px;
}
.from p input {
  width: 300px;
  border: none;
  outline: none;
  background-color: transparent;
}
.from p i {
  font-size: 16px;
  color: #aaa;
  margin-right: 10px;
  display: inline-block;
}
.sub {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
}
.sub button {
  width: 100%;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #aaa;font-size:12px;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color:#aaa;font-size:12px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color:#aaa;font-size:12px;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color:#aaa;font-size:12px;
}
</style>
